<template>
  <div class="body">
    <div class="photo-container">
      <div class="date">
        <span>{{date}}</span>
      </div>
      <div class="photo-detail">
        <div class="img-content" v-for="(item,index) in photoList" :key="index">
          <img :src="item.path" alt="">
        </div>
      </div>
    </div>
    <div class="photo-container">
      <div class="date">
        <span>{{date}}</span>
      </div>
      <div class="photo-detail">
        <div>
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
          <img src="../style/img/1.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// TODO: 時間分類沒解決
import { getSocietyInfo } from '@/api/society'
export default {
  name: 'AssnPhotoList',
  data () {
    return {
      date: '12312123123',
      sid: this.$route.query.sid,
      photoList: ''
    }
  },
  created () {
    this.loadList()
  },
  methods: {
    loadList () {
      getSocietyInfo({
        sid: this.sid
      }).then(res => {
        var resData = res.data
        // this.date = resData
        this.photoList = resData.photo
        this.photoList.map(item => {
          item.path = 'http://weyouth.vip' + item.path
        })
      }).catch(err => {
        console.log(err)
      })
    }
  }

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.body {
  width: 100%;
  min-height: 800px;
  height: auto;
  background: #fff;
}
.photo-container {
  width: 100%;
  min-height: 300px;
  height: auto;
  padding-top: 30px;
}
.date {
  width: 100%;
  padding-left: 20px;
  font-weight: bold;
}
.photo-detail {
  margin-top: 20px;
  font-size: 0;
}
.img-content {
  display: inline-block;
}
img {
  width: 75px;
  height: 75px;
}
</style>
